<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员中心Member Cente</title>
		<link rel="stylesheet" href="css/head_top_footer.css" />
		<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap/bootstrapValidator.min.css" />
		<style>
			.box{
				width: 600px;
				margin: 0 auto;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script src="js/hk库.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/bootstrap/bootstrapValidator.min.js"></script>
		<script src="js/bootstrap/zh_CN.js"></script>
		<script>
			$(function() {
				// 公共部分
				$('.header').load('head.html');
				$('.footer').load('footer.html');
			});
		</script>
		<script>
			$('#myTabs a').click(function(e) {
				e.preventDefault()
				$(this).tab('show')
			})
			
			$server = 'http://localhost:8080/';
			window.onload = function(){
				$.ajax({
					url: $server + 'user/get_user_info.do',
					datatype: 'json',
					type: 'POST',
					corssDomain: true,
					xhrFields:{
						withCredentials: true // 携带跨域cookie
					},
					success: function(result){
						console.log(result);
						if (result.code == 200){
							$('#username')[0].value = result.data.username;
							$('#userid')[0].value = result.data.id;
							$('#phone')[0].value = result.data.phone;
							$('#emailinput')[0].value = result.data.email;
							$('#question')[0].value = result.data.question;
							$('#answer')[0].value = result.data.answer;
						}else{
							alert(result.msg);
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown){
						alert(textStatus);
					}
				});
			}
			
			// 更新个人信息
			function submit_info(){
				$username = $('#username').val();
				$phone = $('#phone').val();
				$email = $('#emailinput').val();
				$question = $('#question').val();
				$answer = $('#answer').val();
				
				$.ajax({
					url: $server + 'user/update_user.do',
					datatype: 'json',
					data: {username: $username, phone: $phone, email: $email, question: $question, answer: $answer},
					type: 'POST',
					corssDomain: true,
					xhrFields:{
						withCredentials: true // 携带跨域cookie
					},
					success: function(result){
						console.log(result);
						if (result.code == 200){
							alert(result.msg);
							window.location.reload();
						}else{
							alert(result.msg);
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown){
						alert(textStatus);
					}
				});
			}
			
			// 修改密码
			function submit_pwd(){
				$oldPassword = $('#oldPassword').val();
				$newPassword = $('#newPassword').val();
				
				$.ajax({
					url: $server + 'user/reset_password.do',
					datatype: 'json',
					data: {oldPassword: $oldPassword, newPassword: $newPassword},
					type: 'POST',
					corssDomain: true,
					xhrFields:{
						withCredentials: true // 携带跨域cookie
					},
					success: function(result){
						console.log(result);
						if (result.code == 200){
							alert(result.msg);
							window.location.reload();
						}else{
							alert(result.msg);
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown){
						alert(textStatus);
					}
				});
			}
		</script>

		<script>
			$(function () {
			$('form').bootstrapValidator({
	　　　　　　　　message: 'This value is not valid',
				　feedbackIcons: {
					　　　　　　　　valid: 'glyphicon glyphicon-ok',
					　　　　　　　　invalid: 'glyphicon glyphicon-remove',
					　　　　　　　　validating: 'glyphicon glyphicon-refresh'
				　　　　　　　　   },
				fields: {
					question: {
						// message: '用户名验证失败',
						validators: {
							notEmpty: {
								message: '找回密码-问题不能为空'
							}
						}
					},
					answer: {
						validators: {
							notEmpty: {
								message: '找回密码-答案不能为空'
							}
						}
					},
					phone: {
						validators: {
							notEmpty: {
								message: '手机号码不能为空'
							}
						}
					},
					oldPassword: {
						validators: {
							notEmpty: {
								message: '旧密码不能为空'
							}
						}
					},
					newPassword: {
						validators: {
							notEmpty: {
								message: '新密码不能为空'
							}
						}
					}
				}
			});
		});
		</script>
	</head>
	<body>
		<!--头部-->
		<div class="header"></div>
		<div class="box">
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">用户信息</a></li>
				<li role="presentation"><a href="#pwd" aria-controls="pwd" role="tab" data-toggle="tab">修改密码</a></li>
			</ul>
			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="info">
					<!-- <form> -->
						<div class="form-group">
							<label for="userid" style="width: 100px; text-align: right;">用户ID</label>
							<input id="userid" name="userid" type="text" class="form-control" style="width: 200px; display: inline;" readonly >
						</div>
						<div class="form-group">
							<label for="username" style="width: 100px; text-align: right;">用户名</label>
							<input id="username" name="username" type="text" class="form-control" style="width: 200px; display: inline;" readonly>
						</div>
						<div class="form-group">
							<label for="phone" style="width: 100px; text-align: right;">手机号码</label>
							<input id="phone" name="phone" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<div class="form-group">
							<label for="emailinput" style="width: 100px; text-align: right;">邮箱</label>
							<input id="emailinput" name="emailinput" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<div class="form-group">
							<label for="question" style="width: 100px; text-align: right;">找回密码-问题</label>
							<input id="question" name="question" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<div class="form-group">
							<label for="answer" style="width: 100px; text-align: right;">找回密码-答案</label>
							<input id="answer" name="answer" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<button onclick="submit_info()" type="submit" style="margin-left: 150px;" class="btn btn-default">提交</button>
					<!-- </form> -->
				</div>


				<div role="tabpanel" class="tab-pane" id="pwd">
					<!-- <form> -->
						<div class="form-group">
							<label for="oldPassword" style="width: 100px; text-align: right;">旧密码</label>
							<input id="oldPassword" name="oldPassword" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<div class="form-group">
							<label for="newPassword" style="width: 100px; text-align: right;">新密码</label>
							<input id="newPassword" name="newPassword" type="text" class="form-control" style="width: 200px; display: inline;" >
						</div>
						<button onclick="submit_pwd()" type="submit" style="margin-left: 150px;" class="btn btn-default">提交</button>
					<!-- </form> -->
				</div>
			</div>
		</div>
		<!--底部-->
		<div class="footer"></div>
	</body>
</html>
